import React,{ Component } from 'react'
import { InputItem,Button,Toast } from 'antd-mobile'
import request from '../../api/request'


export default class Login extends Component{

    constructor(props){
        super(props)

        this.state = {
            username:'',
            password:''
        }
    }

    changeUsername = (val) => {
        this.setState({
            username:val
        })
    }
    changePassword = (val) => {
        this.setState({
            password:val
        })
    }
    login = async () =>{
       const res = await request({
            url:this.props.api,
            method:'POST',
            data:{
                username:this.state.username,
                password:this.state.password,
            },
        })
        if(res){
            const { push } = this.props.history
            switch( res.data.status ){
                case 1:break;
                case 2:
                Toast.success('登陆成功,正在跳转首页', 1,()=>{
                    push('/home/hot')
                });
                break;

            }
        }
        
    }

    render(){
        const { username,password } = this.state
        return(
            <div>
                <InputItem
                    placeholder="用户名"
                />
                <InputItem
                    placeholder="请输入用户名"
                    value={ username }
                    onChange = { this.changeUsername }
                >
                    <div style={{ backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} />
                </InputItem>
                <InputItem
                    placeholder="密码"
                />
                <InputItem
                    placeholder="请输入密码"
                    value={ password }
                    onChange = { this.changePassword }
                >
                    <div style={{ backgroundImage: 'url(https://ftp.bmp.ovh/imgs/2019/11/f84bf86456c5605c.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} />
                </InputItem>
                <Button type="primary" onClick={ this.login }>登录</Button>
            </div>
        )
    }
}